<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="1000px"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
      @open="handleOpen"
      @close="handleClose"
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>办理业务</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <!-- 项目信息 -->
      <div class="bg-white mt-[10px]">
        <BaseHead style="border-bottom: 0">{{ baseInfoData.name }}</BaseHead>
        <BaseTable>
          <tr>
            <td class="td-name">负责人</td>
            <td>{{ baseInfoData.chargerName }}</td>
            <td class="td-name">所属单位</td>
            <td>{{ baseInfoData.unitName }}</td>
          </tr>
          <tr>
            <td class="td-name">项目编号</td>
            <td>{{ baseInfoData.code }}</td>
            <td class="td-name">项目分类</td>
            <td>{{ baseInfoData.proTypeName }}</td>
          </tr>
          <tr>
            <td class="td-name">签订日期</td>
            <td>{{ baseInfoData.authorizeDate }}</td>
            <td class="td-name">终止日期</td>
            <td>{{ baseInfoData.planEndDate }}</td>
          </tr>
          <tr>
            <td class="td-name">项目经费</td>
            <td>{{ baseInfoData.feeAuthorize }} 万元</td>
            <td class="td-name">已到金额</td>
            <td>{{ baseInfoData.feeIn }} 万元</td>
          </tr>
          <tr>
            <td class="td-name">项目状态</td>
            <td>{{ baseInfoData.proStatusName }}</td>
            <td class="td-name">审核状态</td>
            <td>
              <CommonLabel
                :dataList="checkStatusList.value"
                valueKey="dictValue"
                labelKey="dictLabel"
                :value="baseInfoData.checkStatus"
              />
            </td>
          </tr>
        </BaseTable>
      </div>
      <div class="business-item-wrap">
        <div class="business-item xmbg">
          <div>变更</div>
          <div class="sub-title">针对信息进行变更申请</div>
          <!-- isThereChange 0:没有变更数据 -> 申请 1:存在变更数据 ->申请 査看 2:存在未审核的变更数据 ->査看 -->
          <el-button
            link
            type="primary"
            @click="addBg"
            v-if="['0', '1'].includes(businessFlag['变更'])"
            >申请</el-button
          >
          <el-button
            link
            type="primary"
            @click="viewBg"
            v-if="['1', '2'].includes(businessFlag['变更'])"
            >查看</el-button
          >
        </div>
        <!-- 横向项目没有中检 -->
        <div class="business-item xmzj" v-if="projectClass != 'yfContract'">
          <div>中检</div>
          <div class="sub-title">提交中检报告</div>
          <!-- isThereMiddelCheck 0:没有中检数据 -> 申请 1:存在中检数据 ->申请 査看 2:存在未审核的中检数据 ->査看 -->
          <el-button
            link
            type="primary"
            @click="addZj"
            v-if="['0', '1'].includes(businessFlag['中检'])"
            >申请</el-button
          >
          <el-button
            link
            type="primary"
            @click="viewZj"
            v-if="['1', '2'].includes(businessFlag['中检'])"
            >查看</el-button
          >
        </div>
        <div class="business-item xmjx">
          <div>结项</div>
          <div class="sub-title">提交结项报告</div>
          <!-- isThereComplete 0:没有结项数据 -> 申请  1:存在结项数据 ->査看 -->
          <el-button link type="primary" @click="addJx" v-if="businessFlag['结项'] === '0'"
            >申请</el-button
          >
          <el-button link type="primary" @click="viewJx" v-if="businessFlag['结项'] === '2'"
            >查看</el-button
          >
        </div>
        <div class="business-item xmwd">
          <div>文档+</div>
          <div class="sub-title">上传项目文档</div>
          <el-button link type="primary" @click="handleDocument">维护</el-button>
        </div>
        <div class="business-item cursor-pointer jfbx">
          <div>经费报销</div>
          <div class="sub-title">发起经费报销申请</div>
          <el-button
            link
            type="primary"
            v-if="['0', '1'].includes(businessFlag['报销'])"
            @click="addBx"
            >申请</el-button
          >
          <el-button
            link
            type="primary"
            v-if="['1', '2'].includes(businessFlag['报销'])"
            @click="viewBx"
            >查看</el-button
          >
        </div>

        <!-- 横向和校级没有外拨板块 -->
        <!-- <div class="business-item cursor-pointer jfwb">
          <div>外拨</div>
          <div class="sub-title">发起经费外拨申请</div>
          <el-button link type="primary" @click="addWb">申请</el-button>
          <el-button link type="primary" @click="viewWb">查看</el-button>
        </div> -->
        <div
          class="business-item cursor-pointer"
          v-if="projectClass == 'zXProject' && baseInfoData.outFee && baseInfoData.outFee != 0"
        >
          <div>外拨</div>
          <div class="sub-title">发起经费外拨申请</div>
          <el-button
            link
            type="primary"
            v-if="['0', '1'].includes(businessFlag['外拨'])"
            @click="addWb"
            >申请</el-button
          >
          <el-button
            link
            type="primary"
            v-if="['1', '2'].includes(businessFlag['外拨'])"
            @click="viewWb"
            >查看</el-button
          >
        </div>

        <div class="business-item jftz">
          <div>调账</div>
          <div class="sub-title">发起经费调账申请</div>
          <el-button
            link
            type="primary"
            v-if="['0', '1'].includes(businessFlag['调账'])"
            @click="addTz"
            >申请</el-button
          >
          <el-button
            link
            type="primary"
            v-if="['1', '2'].includes(businessFlag['调账'])"
            @click="viewTz"
            >查看</el-button
          >
        </div>
        <div class="business-item  jfjz">
          <div>结转</div>
          <div class="sub-title">发起经费结转申请</div>
        </div>
        <div class="business-item bxdy">
          <div>报销打印</div>
          <div class="sub-title">打印报销单</div>
        </div>
        <div class="business-item yjpj">
          <div>预借票据</div>
          <div class="sub-title">发起票据预借申请</div>
          <!-- <el-button link type="primary">申请</el-button> -->
        </div>
      </div>
    </el-dialog>
  </div>
  <AddZjModal ref="addZjModalRef" @save-success="getBaseInfoData" />
  <AddJxModal ref="addJxModalRef" @save-success="getBaseInfoData" />
  <AddZxXjBgModal ref="addZxXjBgModalRef" @save-success="getBaseInfoData" />
  <AddYfBgModal ref="addYfBgModalRef" @save-success="getBaseInfoData" />
  <ChangeRecordModal ref="changeRecordModalRef" @operate-success="getBaseInfoData" />
  <ZjRecordModal ref="zjRecordModalRef" @operate-success="getBaseInfoData" />
  <ViewJxModal ref="viewJxModalRef" />
  <ZxDocumentModal ref="zxDocumentModalRef" />
  <YfDocumentModal ref="yfDocumentModalRef" />
  <XjDocumentModal ref="xjDocumentModalRef" />
  <JfbxsqModal ref="jfbxsqModalRef" @getslist="getBaseInfoData" />
  <JfbxsqViewModal ref="jfbxsqViewModalRef" @emptyData="getBaseInfoData" />
  <JftzsqModal ref="jftzsqModalRef" @getslist="getBaseInfoData" />
  <JftzsqViewModal ref="jftzsqViewModalRef" @emptyData="getBaseInfoData" />
  <JfwbsqModal ref="jfwbsqModalRef" @getlist="getBaseInfoData" />
  <JfwbsqTableModal ref="jfwbsqViewModalRef" @emptyData="getBaseInfoData" />
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import { baseInfo } from "@/api/project/zx/lxxm";
import { getList } from "@/api/project/zx/xmjx";
import AddZjModal from "@/views/project/components/xmzj/EditModal.vue";
import AddJxModal from "@/views/project/components/xmjx/EditModal.vue";
import ViewJxModal from "@/views/project/components/xmjx/ViewModal.vue";
import AddZxXjBgModal from "@/views/project/pages/xmbg/components/EditModal.vue";
import AddYfBgModal from "@/views/project/yf/jzhtbg/components/EditModal.vue";
import ChangeRecordModal from "@/views/project/pages/xmbg/components/RecordModal.vue";
import ZjRecordModal from "@/views/project/components/xmzj/RecordModal.vue";
import ZxDocumentModal from "@/views/project/zx/lxxm/components/DocumentModal.vue";
import YfDocumentModal from "@/views/project/yf/jzhtqd/components/DocumentModal.vue";
import XjDocumentModal from "@/views/project/xj/xmlx/components/DocumentModal.vue";
import JfbxsqModal from "@/components/money/jfbxsq";
import JfbxsqViewModal from "@/components/money/jfbxTable";
import JftzsqModal from "@/components/money/jftzsq";
import JftzsqViewModal from "@/components/money/jftzsqTable";
import JfwbsqModal from "@/components/money/jfwbsq";
import JfwbsqTableModal from "@/components/money/jfwbTable";
import useDictFetch from "@/hooks/useDictFetch";
const checkStatusList = ref([]);
const dialogVisible = ref(false);
const operateId = ref(null);
const baseInfoData = ref({});
const businessFlag = ref({});
const addZjModalRef = ref();
const addJxModalRef = ref();
const addZxXjBgModalRef = ref();
const addYfBgModalRef = ref();
const changeRecordModalRef = ref();
const zjRecordModalRef = ref();
const viewJxModalRef = ref();
const zxDocumentModalRef = ref();
const yfDocumentModalRef = ref();
const xjDocumentModalRef = ref();
const jfbxsqModalRef = ref();
const jfbxsqViewModalRef = ref();
const jftzsqModalRef = ref();
const jftzsqViewModalRef = ref();
const jfwbsqModalRef = ref();
const jfwbsqViewModalRef = ref();
const projectClass = ref("");
const projectType = ref("");
const todo = (id) => {
  dialogVisible.value = true;
  operateId.value = id;
  getBaseInfoData();
};
defineExpose({ todo });
//获取基础信息
const getBaseInfoData = async () => {
  try {
    const params = {
      proId: operateId.value,
    };
    const res = await baseInfo(params);
    baseInfoData.value = res.data;
    businessFlag.value = res.data.businessFlag;
    projectClass.value = res.data.projectClass;
    projectType.value = res.data.proType;
  } catch (error) {
    console.log(error);
  }
};
//点击变更-申请
const addBg = () => {
  if (projectClass.value == "yfContract") {
    addYfBgModalRef.value.add(operateId.value);
  } else {
    addZxXjBgModalRef.value.add(operateId.value, projectClass.value);
  }
};
//点击变更-查看
const viewBg = () => {
  changeRecordModalRef.value.view(operateId.value, projectClass.value);
};
//点击中检-申请
const addZj = () => {
  addZjModalRef.value.add(projectClass.value, projectType.value, operateId.value);
};
//点击中检-查看
const viewZj = () => {
  zjRecordModalRef.value.view(operateId.value);
};
//点击结项-申请
const addJx = () => {
  addJxModalRef.value.add(projectClass.value, projectType.value, operateId.value);
};
//点击结项-查看
const viewJx = async () => {
  try {
    const params = {
      proId: operateId.value,
      pageNo: 1,
      pageSize: 1000,
    };
    const res = await getList(params);
    const record = res.rows[0]; //结项数据
    //判断结项数据审核状态 调用不同的组件 暂存和审核不通过跳到编辑页面  审核中、审核通过跳到查看页面
    if (record.checkstatus == -1 || record.checkstatus == 3) {
      addJxModalRef.value.edit(record.id, operateId.value, record.taskId, record.isAuditor);
    } else {
      viewJxModalRef.value.view(operateId.value, record.id);
    }
  } catch (error) {
    console.log(error);
  }
};
//点击文档维护
const handleDocument = () => {
  if (projectClass.value == "yfContract") {
    yfDocumentModalRef.value.edit(operateId.value);
  } else if (projectClass.value == "zXProject") {
    zxDocumentModalRef.value.edit(operateId.value);
  } else {
    xjDocumentModalRef.value.edit(operateId.value);
  }
};
//点击经费报销-申请
const addBx = () => {
  jfbxsqModalRef.value.openDialog(operateId.value);
};
//点击经费报销-查看
const viewBx = () => {
  jfbxsqViewModalRef.value.openjfbxsqTable(operateId.value);
};
//点击经费外拨-申请
const addWb = () => {
  jfwbsqModalRef.value.openDialog(operateId.value);
};
//点击经费外拨-查看
const viewWb = () => {
  jfwbsqViewModalRef.value.openDialogcompile(operateId.value);
};
//点击经费调账-申请
const addTz = () => {
  jftzsqModalRef.value.openDialog(operateId.value);
};
//点击经费调账-查看
const viewTz = () => {
  jftzsqViewModalRef.value.openjftzsqTable(operateId.value);
};
const handleOpen = () => {
  checkStatusList.value = useDictFetch("bpm_process_instance_status");
};
//关闭
const handleClose = () => {
  //清空baseInfoData数据
  baseInfoData.value = {};
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-dialog__body) {
  padding-bottom: 0px;
}
.business-item-wrap {
  width: 880px;
  margin: 20px auto 0;
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
.business-item {
  padding: 10px;
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
  color: #444;
  float: left;
  margin: 0 10px 20px;
  background: url("@/assets/images/xmbg.png") no-repeat right top;
  background-color: #fff;
  div {
    line-height: 30px;
  }
  .sub-title {
    color: #b2b2b2;
    font-size: 12px;
  }
  &.xmzj {
    background-image: url("@/assets/images/xmzj.png");
  }
  &.xmjx {
    background-image: url("@/assets/images/xmjx.png");
  }
  &.xmwd {
    background-image: url("@/assets/images/xmwd.png");
  }
  &.jfbx {
    background-image: url("@/assets/images/jfbx.png");
  }
  &.bxdy {
    filter: grayscale(100%);
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("@/assets/images/bxdy.png");
  }
  &.jfwb {
    background-image: url("@/assets/images/jfwb.png");
  }
  &.jfjz {
    filter: grayscale(100%);
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("@/assets/images/jfjz.png");
  }
  &.jftz {
    background-image: url("@/assets/images/jftz.png");
  }
  &.yjpj {
    filter: grayscale(100%);
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("@/assets/images/yjpj.png");
  }
}
</style>
